<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>评阅监控</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				<div>
					<span>时间：</span>
					 <el-date-picker
					  v-model="time"
					  type="year"
					  clearable
					  placeholder="选择年"
					  format="yyyy"
					  @change="timeyearclick">
					</el-date-picker>
					<!-- <el-select v-model="time" placeholder="全部">
					    <el-option
					      v-for="item in timelist"
					      :key="item"
					      :label="item"
					      :value="item">
					    </el-option>
					</el-select> -->
					<span style="margin-left:15px;">类型：</span>
					<el-select v-model="classify" placeholder="全部" clearable @change="classifyclick">
					    <el-option
					      v-for="item in classifylist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
					<span style="margin-left:15px;">年级：</span>
					<el-select v-model="grade" placeholder="全部" clearable @change="gradeclick">
					    <el-option
					      v-for="item in gradelist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select> 
				</div>
			</div>
			<div class="contentMainlist">
				<div class="cmlLeft">
					<ul>
						<li v-for="item in contentlist">
							<div>
								<h3>{{item.name}}</h3>
								<p>
									<span class="blue">{{item.examType==1?'作业/测验':item.examType==2?'月考':item.examType==3?'期中考试':'期末考试'}}</span>
								</p>
								<div class="examInfo">
									<b><i>考试时间：</i>{{item.startTime}}</b>
									<b><i>考试范围：</i><em v-for="grade in item.studentRange">{{grade.gradeName}}</em></b>
								</div>
								<div class="examInfo" style="padding-top:10px;">
									<b><i>考试进度：</i>{{item.markHubType==1?'全校阅卷':item.markHubType==2?'全班阅卷':item.markHubType==3?'导入成绩':item.markHubType==4?'先批后扫':'线上考试'}}</b>
								</div>
							</div>
							<div class="tyboxset">
								<em @click="examinfolist(item.id,item.name)">评阅监控</em>
							</div>
						</li>
					</ul>
				</div>
				<div class="cmlRight">
					<h3>关于评阅</h3>
					<span class="clrtitle"><i>下载产品</i></span>
					<ul class="clrdownlost">
						<li>评阅产品（使用说明书）.pdf <a href=""><img src="../../assets/image/school/download.jpg" alt=""></a></li>
						<li>扫描客户端（安装包）.rar <a href=""><img src="../../assets/image/school/download.jpg" alt=""></a></li>
					</ul>
					<span class="clrtitle"><i>联系我们</i></span>
					<div class="boxcentercontact">
						<em>咨询客服</em>
						<em>留言反馈</em>
					</div>
					<ul class="ewmbox">
						<li>
							<img src="../../assets/image/school/xcx.jpg" alt="">
							<i>阅卷小程序</i>
						</li>
						<li>
							<img src="../../assets/image/school/xcx.jpg" alt="">
							<i>查分小程序</i>
						</li>
					</ul>
					<p class="boxbslmedu">百师云 bslmedu.com 版权所有<br>北京佰师博睿科技有限公司 京ICP备2021014688号-1</p>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<span class="totaldata">共<i>{{total}}</i>条数据</span>
				<div>
					<!-- <el-pagination
						background
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page="currentPage4"
					      :page-sizes="[10, 20, 50, 100]"
					      :page-size="100"
					      layout="total, sizes, prev, pager, next, jumper"
					      :total="total">
					</el-pagination> -->
					<el-pagination
						background
					      @current-change="handleCurrentChange"
						  :page-sizes="[10, 20, 50]"
						  @size-change="handleSizeChange"
						  :page-size="objsub.pageSize"
						  layout="sizes, prev, pager, next"
					      :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 创建考试  v-if="addExamIshow"-->
		<examEdite v-if="addExamIshow" @addexamclick="addexamclick"></examEdite>
		
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import examEdite from '../../components/school/exditexam.vue'
	import {get,post,put,del,dele} from '../../request/api.js'
	export default{
		data(){
			return{
				contentlist:[],
				searchInput:'',
				time:'',
				classify:'',
				grade:'',
				status:'',
				timelist:['2024年','2023年'],
				classifylist:[],
				gradelist:[],
				statuslist:['开启','停用'],
				addExamIshow:false,
				currentPage4: 4,
				objsub:{
					page:1,
					pageSize:10,
					query:{
						year:0,
						optionalId:0,
						gradeId:0
					}
				},
				total:0
			}
		},
		mounted() {
			this.pyjclist()
			this.classifyclik()
			this.gradeclik()
		},
		methods:{
			handleSizeChange(val){
				this.objsub.pageSize = val
				this.pyjclist()
			},
			handleCurrentChange(val){
				this.objsub.page = val
				this.pyjclist()
			},
			pyjclist(){
				//console.info(this.tiem+'-----')
				var year = 0
				if(this.time!=undefined){
					const date = new Date(this.time);
					year = date.getFullYear()
				}else{
					year=0
				}
				
				this.objsub.query.year = year?year:0
				this.objsub.query.optionalId =this.classify?parseInt(this.classify):0
				this.objsub.query.gradeId = this.grade?parseInt(this.grade):0
				post('/reviewmonitor/pagelist',this.objsub)
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.total = res.data.total
						this.contentlist = res.data.items
					}else{
						this.$message.error(res.message); 
					}
				})
			},
			timeyearclick(val){
				this.pyjclist()
			},
			classifyclick(val){
				this.pyjclist()
			},
			gradeclick(val){
				this.pyjclist()
			},
			classifyclik(){
				get('/optional/list')
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.classifylist = res.data
					}else{
						this.$message.error(res.message); 
					}
					
				})
			},
			gradeclik(){
				get('/grade/list')
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.gradelist = res.data
					}else{
						this.$message.error(res.message); 
					}
					
				})
			},
			// 考试概览
			examinfolist(id,name){
				this.$router.push('/allmonitoringoverview?examid='+id+'&name='+name)
			}
		},
		components:{navTop,examEdite}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px;
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist span{
		font-size:14px;
		color:#557292;
	}
	.searchlist >>> .el-input__inner{
		border-radius: 10px;
		height:35px;
		font-size:14px;
		width:150px;
	}
	.searchlist >>> .el-input__icon{
		line-height:35px;
	}
	.searchlist >>> .el-date-editor.el-input, .searchlist >>> .el-date-editor.el-input__inner{
		width:150px;
	}
	.searchlist b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.contentMainlist{
		display: flex;
		justify-content: space-between;
		margin-top:20px;
	}
	.cmlLeft{
		width:calc(100% - 370px)
	}
	.cmlRight{
		box-sizing: border-box;
		width:352px;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		padding:0 24px;
	}
	.cmlRight h3{
		border-bottom:solid 1px #DEE1E7;
		line-height:66px;
		font-size:18px;
	}
	.clrtitle{
		font-size:16px;
		color:#2A303B;
		position: relative;
		display: block;
		height:40px;
	}
	.clrtitle::before{
		content:'';
		position: absolute;
		width: 64px;
		height: 6px;
		background: linear-gradient( 90deg, #527BFF 0%, #FFFFFF 100%);
		border-radius: 3px;
		left:0;
		bottom:0;
		z-index:1
	}
	.clrtitle i{
		position: absolute;
		left:0;
		bottom:0;
		font-style: normal;
		z-index:2
	}
	.clrdownlost li{
		display: flex;
		justify-content: space-between;
		padding-left:28px;
		font-size:14px;
		padding:6px 0 6px 35px;
		margin-top:14px;
	}
	.clrdownlost li:first-child{
		background:url(../../assets/image/school/pdf.jpg) no-repeat;
		background-size:contain
	}
	.clrdownlost li:last-child{
		background:url(../../assets/image/school/wj.jpg) no-repeat;
		background-size:contain
	}
	.boxcentercontact{
		display: flex;
		justify-content:space-between;
		margin-top:14px;
	}
	.boxcentercontact em{
		box-sizing: border-box;
		display: inline-block;
		width: 145px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #DEE1E7;
		text-align: left;
		font-size:14px;
		color:#557292;
		padding-left:36px;
		line-height:34px;
	}
	.boxcentercontact em:first-child{
		background:#F2F6FB url(../../assets/image/school/mess.jpg) no-repeat 15px center;
	}
	.boxcentercontact em:last-child{
		background:#F2F6FB url(../../assets/image/school/bj.jpg) no-repeat 15px center;
	}
	.cmlLeft ul li{
		display: flex;
		justify-content: space-between;
		background:#fff;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		margin-bottom:20px;
		align-items: center;
		padding:24px;
	}
	.cmlLeft ul li:last-child{
		margin-bottom:0;
	}
	.cmlLeft ul li h3{
		font-size:18px;
		color: #2A303B;
	}
	.cmlLeft ul li p{
		display: flex;
		padding:10px 0;
	}
	.cmlLeft ul li p span{
		display: inline-block;
		height:24px;
		line-height:24px;
		font-size:12px;
		margin-right:10px;
		padding:0 10px;
	}
	.cmlLeft ul li p span.blue{
		background: rgba(41,92,255,0.04);
		border-radius: 6px;
		border: 1px solid #295CFF;
		color:#295CFF;
	}
	.cmlLeft ul li p span.green{
		background: rgba(40,143,65,0.04);
		border-radius: 6px;
		border: 1px solid #288F41;
		color:#288F41;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#333;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfostyle{
		display: flex;
		color:#8E96A4;
		font-size:14px;
		margin-top:10px;
	}
	.boxinfostyle i{
		display: flex;
		font-style: normal;
		padding-right:10px;
		margin-right:10px;
		position: relative;
		color:#5B6371
	}
	.boxinfostyle i::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfostyle i:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.tyboxset em{
		display:block;
		width: 104px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		font-size:14px;
		text-align: center;
		cursor: pointer;
		background: #295CFF;
		color:#fff;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.ewmbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top:14px;
	}
	.ewmbox li{
		box-sizing: border-box;
		width: 145px;
		height: 175px;
		background: #F2F6FB;
		border-radius: 20px;
		text-align: center;
		padding-top:14px;
	}
	.ewmbox li i{
		display: block;
		font-size:14px;
		color:#2A303B;
		font-style: normal;
		padding-top:5px;
	}
	.ewmbox li img{
		width:121px;
		height:121px;
		border-radius:10px
	}
	.boxbslmedu{
		font-size:12px;
		color:#8E96A4;
		text-align: center;
		padding-top:40px;
		padding-bottom:40px;
		line-height:1.8
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>